<template>
  <div class="pick">
    {{optionList}}---{{columns}}
    <van-field clearable readonly name="picker" :disabled="element.disabled" :required="element.required" :value="fieldValue" :label="element.label" :placeholder="element.placeholder" @click="pickerClick" />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>

<script>
import linkageMixin from '../mixin/linkageMixin'
export default {
  name: 'pick',
  mixins: [linkageMixin],
  inject: ['element'],
  data() {
    return {
      showPicker: false
    }
  },
  computed: {
    options() {
      return this.element.optionsSource === '0' ? this.element.options : this.element.urlData.urlOptions
    },
    optionsSource() {
      return this.element?.optionsSource
    },
    columns() {
      // 判断option是自定义还是URL获取的
      return this.element.linkageList?.length > 0 ? this.optionList.map(item => item.label) : this.options.map(item => item.label)
    },
    formId() {
      return this.element.formId
    },
    fieldValue() {
      return this.options.find(item => item.value === this.element.vModel)?.label || this.element.vModel
    }
  },
  methods: {
    onConfirm(val) {
      const value = this.options.find(item => item.label === val)?.value
      this.$emit('onConfirm', value)
      this.showPicker = false
    },
    pickerClick() {
      if (!this.element.readonly && !this.element.disabled) {
        this.showPicker = true
      }
    }
  }
}
</script>

<style scoped>
.van-cell::after {
  display: block;
}
</style>